我想說的是
預期結果：刪除清單中選定的服務
使用 filter 對陣列做篩選，並且重新設定服務列表

在我們的努力下，上一次練習中已經可以為所欲為的增加我們想要的服務
做一些身體保健的行為，不過服務多了按久了腰受不了，想要下車
而刪除的操作方法，就是按一下想刪除的服務，就刪除了

接下來就是一步一步的把程式寫好

1. 在服務上綁定 onClick 事件

首先當然是在原本的服務清單上加入點擊事件

<li 
    key={index+massageService}
    onClick={()=>this.deleteService(index)}
>

我們綁了一個叫做 deleteService 的方法
並且傳遞這個服務在陣列中的 index 過去
這邊踩了一個小雷，因為先前呼叫 function 都是直接

onClick={this.addService}

看了 stack Overflw 說明是
這樣會創建一個新的函數，該函數會使用正確的參數執行

然後先讓deleteService console.log 出傳入的值

deleteService = (index) => {
    console.log(index)
}

2. 刪除指定服務

deleteService = (index) => {
  const newServiceList = this.state.massageServiceList.filter(
    function(massageService, serviceIndex) {
      return serviceIndex !== index
    }
  );

  this.setState({
    massageServiceList: newServiceList
  })
}

我們倒著來看刪除指定服務的最後
熟悉的 setState，就是將一個新的服務列表設定給原先定義舊的服務列表
也就是 state 中的 massageServiceList，來刷新服務列表

那新的服務列表是怎麼來的呢？
可以看到在剛剛的 onClick 事件中有傳入了當前點擊的服務的 index
也就是在陣列中的鍵值，然後使用 filter 來產生新的服務列表陣列
而 filter 是什麼東西呢...沒錯，下一篇的主題就決定是你了 filter！

有些人可能會覺得，為什麼不直接操作 state.massageServiceList 就好了呢？
在其他語言都是這麼做的啊，為什麼要另外把執定給 const newServiceList 呢？
因為 React 是禁止直接操作 state 的，雖然直接修改也能達到一樣的效果
但是教學上面說在後期的性能調校上會有很多麻煩，所以一定不要這樣操作
至於...是後期的什麼性能調校？會遇上什麼麻煩呢？就看看之後我看的教學會不會教到吧

其實教學是用 bind 的方式綁定函數
並且設定新服務的方法是直接使用 splice 方法操作陣列移除指定 index 的資料
而我看了一下網路上關於「移除 react state 屬性」的文章
多數都是使用 filter 來達成，是我也改寫成 filter 的形式